<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
    <style>
        .a {
            border: 1px solid blue;
        }
        .b {
            padding: 15px;
        }
    </style>
</head>
<body>
<div id="a" style="padding: 20px">
<!--    href 是动态的值-->
    <h3>设置单值属性</h3>
    <a v-bind:href="url">{{url}}</a>

    <h3>设置数组语法</h3>
    <a v-bind:href="url"
       v-bind:class="['a', 'b']">{{url}}</a>

    <h3>设置对象语法</h3>
    <a v-bind:href="url"
       v-bind:class="{a: aFlag, b: bFlag}">{{url}}</a>

<!--    语法糖 v-bind => :-->
    <h3>语法糖</h3>
    <a v-bind:href="url"
       :style="{color : 'green', fontSize:fsize}">{{url}}</a>

    <h3>设置函数语法</h3>
    <a v-bind:href="url":style="mystyle()">{{url}}</a>

    <a v-bind:href="url":style="mystyle1()">{{url}}</a>

    <a v-bind:href="url":style="mystyle2()">{{url}}</a>

</div>
<script>
    var vue = new Vue({
        el : "#a", // 绑定元素
        data : {
            url : "index.html",
            aFlag : true,
            bFlag : false,
            fsize : "2em"
        },
        methods : {
            // 非箭头函数
            mystyle : function (){
                return {color : 'red', fontSize : this.fsize};
            },
            // 箭头函数在method中不能使用this
            mystyle1 : () => {
                console.log(this);
                return {color: 'blue', fontSize: '1.5em'};
            },
            // 直接定义
            mystyle2(){
                return {color : 'aqua', fontSize: this.fsize};
            }
        }
    });
</script>
</body>
</html>